<template>
  <a-row type="flex" style="flex-flow: inherit;">
    <a-col :flex="toggle ? '260px' : '30px'" style="margin-right: 12px;background-color: #fff;">
      <!-- <depart-tree :rootOpened="true" :multi="false" @ok="getTreeData" @toggleBool="toggleBool" /> -->
      <OrganizationTree ref="tree" :rootOpened="true" :multi="false" @toggleBool="toggleBool"
        @select="onOrganizeSelect">
      </OrganizationTree>
    </a-col>
    <a-col flex="auto">
      <a-card class="topBox" :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="检测时间">
                <a-range-picker v-model="rangePickerTime" style="width:100%;" valueFormat="YYYY-MM-DD"
                  @change="onTimeChange" allowClear />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="检测结果">
                <a-radio-group v-model="pageFilter.detectResult">
                  <a-radio value="">全部</a-radio>
                  <a-radio value="1">阴性</a-radio>
                  <a-radio value="2">阳性</a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
                <a-button type="primary" @click="onQuery"> 查询 </a-button>
                <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button type="primary" :disabled="isDisabled" @click="onInput">检测结果录入</a-button>
          <a-button @click="onOut()">导出</a-button>
        </div>
        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading"
            :columns="columns" :dataSource="pageData" @change="onTableChange">
            <template slot="detectResult" slot-scope="text">
              <span v-if="text == '1'">阴性</span>
              <span v-if="text == '2'">阳性</span>
            </template>
            <template slot="detectReport" slot-scope="text">
              <j-upload v-model="text"></j-upload>
            </template>
            <!--操作-->
            <template slot="action" slot-scope="text, record">
              <!-- <a-button @click="onInput(record)" type="link" style="padding: 0">编辑</a-button>
              <a-divider type="vertical" /> -->
              <a-button @click="onDetail(record)" type="link" style="padding: 0">查看</a-button>
            </template>
          </z-table>
        </div>
        <AddModal ref="addModalId" @ok="onQuery" />
        <DetailModal ref="detailModalId" />
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import * as sewageCheck from '@/api/sjsk/help/sewageCheck.js'
import AddModal from './modules/AddModal'
import DetailModal from './modules/DetailModal'
// import DepartTree from '@/views/sjsk/modules/departTree'
import OrganizationTree from '@/views/sjsk/personnelMGMT/psycholog/modules/organizationTree'
// views\sjsk\personnelMGMT\psycholog\modules
import { downLoadFileReader } from '@/utils/export-util/util'
export default {
  components: {
    AddModal,
    OrganizationTree,
    // DepartTree,
    DetailModal,
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      rangePickerTime: [],
      loading: false,
      visible: false,
      reloading: false,
      treeDatas: [],
      toggle: true,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '检测地点',
          dataIndex: 'detectAreaDetail',
          align: 'center',
        },
        {
          title: '检测时间',
          dataIndex: 'detectTime',
          align: 'center',
        },
        {
          title: '检测机构',
          dataIndex: 'detectUnit',
          align: 'center',
        },
        {
          title: '检测结果',
          dataIndex: 'detectResult',
          align: 'center',
          scopedSlots: { customRender: 'detectResult' }
        },
        {
          title: '详细数据',
          dataIndex: 'detailData',
          align: 'center',
        },
        {
          title: '检测报告',
          dataIndex: 'detectReport',
          align: 'left',
          width: 150,
          scopedSlots: { customRender: 'detectReport' }
          // customRender: (t) => (<j-ellipsis value={t} length={20}/>)
        },
        // {
        //   title: '操作',
        //   width: 100,
        //   align: 'center',
        //   dataIndex: 'action',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
      departmentId: "",
      isDisabled: true,
    }
  },
  created() { },
  async mounted() {
    this.pageFilter.departmentId = '460000000000'
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
        departmentId: this.departmentId
      }
      this.rangePickerTime = []
      this.refreshTable()
    },
    onTimeChange(date) {
      this.$set(this.pageFilter, 'detectStartTime', date[0])
      this.$set(this.pageFilter, 'detectEndTime', date[1])
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      sewageCheck.sjskSewageData(this.pageFilter).then((res) => {
        if (res.success) {
          if (res.result != null) {
            this.pageData = res.result
          } else {
            this.pageData = {}
          }
          this.loading = false
        } else {
          this.pageData = {}
          this.$message.warn(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    getText(text) {
      return "sdfsdfs"
    },
    onInput(record) {
      this.$refs.addModalId.show(record.id)
    },
    onHistory(record) {
      this.$router.push({
        path: '/sewageCheck/record',
        query: {
          id: record.id
        }
      })
    },
    onDetail(record) {
      this.$refs.detailModalId.show(record.id)
    },
    onOut() {
      sewageCheck.sewageListExportXls(this.pageFilter).then(async res => {
        const fileName = '污水检测.xls'
        await downLoadFileReader(res, fileName)
      })
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
    // 选中组织机构
    onOrganizeSelect(organize, checkedKeys) {
      console.log('organize')
      console.log(organize)
      // this.curOrganize = organize
      // this.onQuery()
      if (organize.code == undefined || organize.code == null || organize.code == "") {
        this.isDisabled = true
      } else {
        this.departmentId = organize.code
        this.$set(this.pageFilter, 'departmentId', organize.code)
        this.isDisabled = false
        this.onQuery()
      }
    },
    toggleBool(bool) {
      console.log("bool")
      console.log(bool)
      this.toggle = bool
    }
  },
}
</script>
<style lang="less" scoped>
.topBox /deep/.ant-row {
  margin-bottom: 0;
}

/deep/.table-page-content {
  .ant-upload {
    display: none;
  }

  .ant-upload-list-item {
    a {
      width: 250px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
      display: inline-block;
      padding: 0;
    }

    i {
      display: none;
    }
  }

  .ant-upload-list-item-card-actions {
    display: none;
  }
}
</style>
